import axios from "axios";
import L from "leaflet";
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import vehicleData from "./data.js";
// import vehicleData from "./data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const getVehicleList = async (obj) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(vehicleData);
    }, 1000);
  });
};


const getAjaxVehicleTableData = (obj) => {
  getVehicleList(obj)
    .then((res) => {
      console.log("getVehicleList-response");
      console.log(res);

      // 获取基本信息
      mapStore.basicInfoTableData = [];
      mapStore.loading = false;

      let tableString =
        '<table class="custom-table"><thead><tr><th width="100">车牌号</th><th width="200">卡口名称</th><th width="150">过车时间</th><th width="150">卡口图片</th><th width="150">经度</th><th width="150">纬度</th></tr></thead><tbody>';

      for (let n = 0; n < res["vehicleTrack"].length; n++) {
        const vehicleNumber = res["vehicleTrack"][n]["vehicleNumber"];

        mapStore.basicInfoTableData.push({
          licensePlate: vehicleNumber,
          brand: res["vehicleTrack"][n]["vehicleBrandName"],
          owner: res["vehicleTrack"][n]["personName"],
          IDNumber: res["vehicleTrack"][n]["personNumber"],
          phone: res["vehicleTrack"][n]["personPhone"],
          type: res["vehicleTrack"][n]["vehicleTypeName"],
        });

        for (let m = 0; m < res["vehicleTrack"][n]["trackList"].length; m++) {
          let stationName =
            res["vehicleTrack"][n]["trackList"][m]["stationName"];
          let dateTime = res["vehicleTrack"][n]["trackList"][m][
            "dateTime"
          ].replace(/T/g, " ");

          let picturePath =
            res["vehicleTrack"][n]["trackList"][m]["picturePath"];
          if (!picturePath) {
            picturePath = "";
          } else {
            picturePath = `<a href="${picturePath}" target='_blank'>点击查看</a>`;
          }

          let longitude = res["vehicleTrack"][n]["trackList"][m]["longitude"];
          longitude = longitude ? longitude : "";

          let latitude = res["vehicleTrack"][n]["trackList"][m]["latitude"];
          latitude = latitude ? latitude : "";

          if (res["vehicleTrack"][n]["trackList"].length === 0) {
            tableString += `<tr>
            <td rowspan="${res["vehicleTrack"][n]["trackList"].length}" data='{%vehicleNumber%: %${vehicleNumber}%}'>${vehicleNumber}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            </tr>
            `;
          } else {
            if (m === 0) {
              tableString += `<tr title='${vehicleNumber}'>
                <td rowspan="${
                  res["vehicleTrack"][n]["trackList"].length
                }" data='{%vehicleNumber%: %${vehicleNumber}%}'>${vehicleNumber}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${stationName}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${dateTime.replace(
                /T/g,
                " "
              )}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${picturePath}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${longitude}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${latitude}</td>
                </tr>
                `;
            } else {
              tableString += `
                <tr title='${vehicleNumber}'>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${stationName}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${dateTime.replace(
                /T/g,
                " "
              )}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${picturePath}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${longitude}</td>
                <td data='{%vehicleNumber%: %${vehicleNumber}%, %lon%: %${longitude}%, %lat%: %${latitude}%, %dateTime%: %${dateTime}%, %stationName%: %${stationName}%}'>${latitude}</td>
                </tr>
                `;
            }
          }
        }
      }

      tableString += "</tbody></table>";
      mapStore.trajectoryDetailsTable = tableString;

      console.log("mapStore.trajectoryDetailsTable");
      console.log(mapStore.trajectoryDetailsTable);
    })
    .catch((error) => {
      ElMessage.error(error);
    });
};

export { getVehicleList, getAjaxVehicleTableData };
